<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>下单页-{eyou:global name='web_name' /}</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <link href="{eyou:global name='web_cmspath'/}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        {eyou:static file="users/skin/css/bootstrap.min.css" /}
        {eyou:static file="users/skin/css/eyoucms.css" /}
        {eyou:static file="users/skin/css/basic.css" /}
        <!-- 新样式 2020-12-8 -->
        {eyou:static file="users/skin/css/element/index.css" /}
        {eyou:static file="users/skin/css/e-user.css" /}
        {eyou:include file="users/skin/css/diy_css.htm"/}
        <style type="text/css">
            .tabs {
                display: flex;
                justify-content: center;
            }
            .tab {
                flex: 1;
                text-align: center;
                height: 38px;
                line-height: 38px;
                font-size: 15px;
                color: #000;
                background: #f0f0f0;
                border-top-right-radius: 4px;
                border-top-left-radius: 4px;
            }
            .tab.active {
                background: #ffc169;
                color: #fff;
            }
           
            .tabContent {
                display: none;
                padding: 10px;
            }
            .tabContent.active {
                display: block;
            }
        </style>
        {eyou:static file="/public/static/common/js/jquery.min.js"/}
        {eyou:static file="/public/plugins/layer-v3.1.0/layer.js"/}
        {eyou:static file="/public/static/common/js/tag_global.js"/}
        {eyou:static file="/public/static/common/js/mobile_global.js"/}
    </head>

    <body>
        {eyou:include file="users/users_header.htm" /}
        <div class="ey-header-status">
            <div class="header-status-l"><a href="javascript:history.go(-1);"><i class="el-icon-arrow-left"></i></a></div>
            <div class="header-status-m">提交订单</div>
            <div class="header-status-r"><a href="{eyou:url link='user/Users/index' /}"><i class="el-icon-user"></i></a></div>
        </div>

        <div class="h50"></div>
        <div class="ey-container">
            <div class="el-row">
                <div data-plugin="selectable" data-selectable="selectable">
                    <form name='theForm' id="theForm" method="post">
                    {eyou:spsubmitorder id="field"}
                        <div class="el-row p10 bgfff mt10">
                            {eyou:empty name="$field.PromType"}
                                {eyou:if condition="!empty($field.onlyVerify)"}
                                <div class="column-title">
                                    <div class="column-name" {$field.selectVerify}>到店自提</div>
                                </div>
                                {eyou:elseif condition="!empty($field.onlyDelivery)"/}
                                <div class="column-title">
                                    <div class="column-name" {$field.selectDelivery}>快递配送</div>
                                </div>
                                {eyou:elseif condition="!empty($field.allLogisticsType)"/}
                                <div class="tabs">
                                    <div class="tab active" {$field.selectDelivery}>快递配送</div>
                                    <div class="tab" {$field.selectVerify}>到店自提</div>
                                </div>
                                {/eyou:if}
                                <div class="tabContents">
                                    <!-- 到店自提 -->
                                    <div class="ey-row-box" {$field.selectVerifyID}>
                                        <div class="wb100 pt10 pb20">
                                            <a href="JavaScript:void(0);" onclick="selectVerifyStore(false);" class="wb100 f16 block">请选择自提门店<span class="fr"><i class="el-icon-arrow-right"></i></span></a>
                                        </div>
                                    </div>
                                    <div {$field.selectVerifyInfo} style="display: none;">
                                        <ul class="address-con pd0">
                                            <li class="el-col el-col-24" >
                                                <div class="address-item flex box" onclick="selectVerifyStore(false);">
                                                    <div class="address-item-l">
                                                        <div class="txt-row f16 fb"><span id="verify_store_name"></span></div>
                                                        <div class="txt-row"><span id="verify_prov_city_area"></span></div>
                                                        <div class="txt-row"><span class="info" id="verify_store_address"></span></div>
                                                    </div>
                                                    <div class="address-item-r">
                                                        <i class="el-icon-arrow-right"></i>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="mt5">
                                            <div class="el-row block">
                                                <input class="form-control wb100" type="text" name="buyer" placeholder="预留姓名">
                                            </div>
                                            <div class="el-row block mt10">
                                                <input class="form-control wb100" type="text" name="phone" autocomplete="off" maxlength="11" onkeyup="this.value=this.value.replace(/[^\d]/g, '');" onpaste="this.value=this.value.replace(/[^\d]/g, '');" placeholder="预留手机号">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 到店自提 end -->
                                    <!-- 快递配送 -->
                                    {eyou:empty name="$field.ShopAddressInfo"}
                                    <div class="ey-row-box mt20" {$field.selectDeliveryID}>
                                        <div class="wb100 pt10 pb20">
                                            <a href="JavaScript:void(0);" {$field.goAddressList} class="wb100 f16 block">请设置收货地址<span class="fr"><i class="el-icon-arrow-right"></i></span></a>
                                        </div>
                                    </div>
                                    {eyou:else/}
                                    <ul class="address-con" {$field.selectDeliveryAddress}>
                                        {eyou:volist name='$field.ShopAddressInfo' id='addr_field'}
                                            <input type="hidden" name="addr_id" id="addr_id" value="{$addr_field.addr_id}">
                                            <li class="el-col el-col-24" {$addr_field.ul_il_id}>
                                                <div class="address-item flex" {$field.goAddressList}>
                                                    <div class="address-item-l">
                                                        <div class="txt-row f16">
                                                            <span id="addr_consignee">{$addr_field.consignee}</span>
                                                            <span id="addr_mobile">{$addr_field.mobile}</span>
                                                        </div>
                                                        <div class="txt-row"><span id="addr_Info">{$addr_field.Info}</span></div>
                                                        <div class="txt-row"><span class="info" id="addr_address">{$addr_field.address}</span></div>
                                                    </div>
                                                    <div class="address-item-r">
                                                        <i class="el-icon-arrow-right"></i>
                                                    </div>
                                                </div>
                                            </li>
                                        {/eyou:volist}
                                    </ul>
                                    {/eyou:empty}
                                    <!-- 快递配送 end -->
                                </div>
                                {eyou:if condition="empty($field.onlyVerify) && !empty($field.shop_prompt)"}
                                <!-- [商城中心]-[商城配置]-[商家提示] -->
                                <div class="ey-row pd0 bgfff" id="shop_prompt">
                                    <div class="el-row">
                                        <div class="red">温馨提示：{$field.shop_prompt}</div>
                                    </div>
                                </div>
                                {/eyou:if}
                            {eyou:else/}
                                <div class="ey-row bgfff">
                                <!-- 虚拟商品提示信息 -->
                                    <div class="el-row"> 
                                        <div class="red"> 该商品为虚拟商品，仅支持在线支付且无需选择收货地址及运费计算。若商品是充值类商品，请将您的手机号或需充值的卡号填入留言中。 </div> 
                                    </div>
                                </div>
                            {/eyou:empty}
                        </div>

                        <div class="el-row p10 bgfff mt10">
                            <div class="column-title"><div class="column-name">商品信息</div></div>
                            <div class="mt20 mb10 order-goods goods-con">
                                <div class="goods-item">
                                    <div class="item-main">
                                        <!-- 获取订单商品 -->
                                        {eyou:spordergoods id="shop_field"}
                                        <div class="item-con">
                                            <div class="item-con-l"><a href="{$shop_field.arcurl}" class="pro-pic"><img src="{$shop_field.litpic}"></a></div>
                                            <div class="item-con-m">
                                                <a href="{$shop_field.arcurl}">{$shop_field.title}</a>
                                                <div class="info mt5">{$shop_field.product_spec}</div>
                                                <div class="price-info mt5"><span class="users_price"><i class="f12">￥</i>{$shop_field.users_price}</span><span class="product_num"><i class="f12">x</i>{$shop_field.product_num}</span></div>
                                            </div>
                                        </div>
                                        {$shop_field.ProductHidden}
                                        {/eyou:spordergoods}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {notempty name="$field.TotalAmount"}
                        <div class="el-row p10 bgfff mt10">
                            <div class="column-title">
                                <div class="column-name">{eyou:eq name="$field.use_pay_type" value="0"}未开启支付方式{eyou:else/}支付方式{/eyou:eq}</div>
                            </div>
                            {$field.PayTypeHidden}
                            <div class="pay-type">
                                <div class="li_div">
                                    <div class="pay-con pt10 pb10">
                                        <!-- 支付API列表，套板请务必将整块代码一起复制，包含隐藏域 -->
                                        {eyou:sppayapilist id='vo'}
                                        {eyou:notempty name="$vo.pay_id"}
                                        <label class="radio-label pt10 pb10 pl0 e-label mb0 radio-label-flex phpSelectPayRadio" data-id="{$vo.pay_id}" data-type="zxzf_{$vo.pay_mark}" onclick="selectPayType(this);">
                                            <span><img class="pay_img" src="{$vo.pay_img}" alt="{$vo.pay_name}">{$vo.pay_name} </span>
                                            <input class="radio" type="radio" name='pay_id' value="{$vo.pay_id}" {eyou:eq name="$key" value="0"} checked {/eyou:eq}>
                                            <span class="check-mark ri0"></span>
                                        </label>
                                        {/eyou:notempty}
                                        {$vo.hidden}
                                        {/eyou:sppayapilist}
                                        <input type="hidden" id="PayID">
                                        <input type="hidden" id="PayMark">
                                        <input type="hidden" id="PayType">
                                        <!-- END -->

                                        {eyou:if condition="empty($field.shop_open_offline) && empty($field.PromType) && empty($field.onlyVerify)"}
                                        <label class="radio-label pt10 pb10 pl0 mb0 e-label radio-label-flex phpSelectPayRadio" data-type="hdfk_payOnDelivery" onclick="selectPayType(this);">
                                            <span><img class="pay_img" src="{eyou:static file='users/skin/images/hdfk.png' /}" alt="货到付款">货到付款 </span>
                                            <input class="radio" type="radio" name='pay_id' value="0">
                                            <span class="check-mark ri0"></span>
                                        </label>
                                        {/eyou:if}

                                        {eyou:eq name="$field.pay_balance_open" value="1"}
                                        <label class="radio-label pt10 pb10 pl0 mb0 e-label radio-label-flex phpSelectPayRadio" data-type="yezf_balance" onclick="selectPayType(this);">
                                            <span><img class="pay_img" src="{eyou:static file='users/skin/images/pay_yiyou.png' /}" alt="余额支付">余额支付 <span class="fc9 f14">可用{$field.UsersMoney} 元</span></span>
                                            <input class="radio" type="radio" name='pay_id' value="0">
                                            <span class="check-mark ri0"></span>
                                        </label>
                                        {/eyou:eq}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/notempty}

                        <div class="el-row p10 bgfff mt10">
                            <div class="column-title">
                                <div class="column-name">留言备注</div>
                            </div>
                            <div class="mt10 mb10">
                                <textarea class="el-textarea__inner" rows="3" name="message" placeholder="给商家留言，选填"></textarea>
                            </div>
                        </div>

                        <div class="el-row p10 bgfff mt10">
                            <div class="order-cell pt10">
                                <div class="tit">商品金额</div>
                                <div class="box"><span class="unit">¥</span><span class="money">{$field.TotalAmount}</span></div>
                            </div>
                            <div class="order-cell">
                                <div class="tit">快递费用</div>
                                <div class="box"><span class="money">{$field.Shipping}</span></div>
                            </div>
                        </div>

                        <div class="h50"></div>
                        <div class="shopcar-footer">
                            {$field.TotalAmountOld}
                            <div class="shopcar-footer-l">共{$field.TotalNumber}件商品 <span class="ml10 price">合计:<i>￥</i><em {$field.TotalAmountId}>{$field.TotalAmount}</em></span></div>
                            <div class="shopcar-footer-r">
                                
                                {eyou:eq name="is_wechat" value='2'}
                                <input type="button" name="submit" value="提交订单" class="el-button el-button--primary el-button--medium" {$field.ShopPaymentPage}>
                                {eyou:else/}
                                <input type="button" name="submit" value="提交订单" class="el-button el-button--primary el-button--medium" {$field.wechatJsApiPay}>
                                {/eyou:eq}
                            </div>
                        </div>
                        {$field.TokenValue}
                        {$field.hidden}
                    {/eyou:spsubmitorder}
                    </form>
                </div>
            </div>
            <input type="hidden" id="unified_id">
            <input type="hidden" id="unified_number">
            <input type="hidden" id="transaction_type">
        </div>
        {eyou:static file="users/skin/js/shop_under_order.js"/}
    </body>
</html>